<template>
  <div class="chart">
    <Carousel
      :height="setting.height"
      :autoplay="setting.autoplay"
      :autoplay-speed="setting.autoplaySpeed"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow">
      <CarouselItem v-for="(obj,i) in chartList">
        <img
          class="carousel-img"
          :src="obj.chartUrl"
          @click="openNewPage(obj.webUrl)">
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //轮播图设置
        setting: {
          //轮播图高度，默认 auto，单位px
          height: 400,
          //自动切换
          autoplay: true,
          //切换速度
          autoplaySpeed: 8000,
          //指示器位置 可选值为 inside（内部），outside（外部），none（不显示）
          dots: 'inside',
          //是否圆形指示器
          radiusDot: true,
          //指示器的触发方式，可选值为 click（点击），hover（悬停）
          trigger: 'hover',
          //切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示）
          arrow: 'hover'
        },
        //轮播图列表
        chartList: []
      }
    },
    methods: {
      //点击轮播图，打开要跳转的页面
      openNewPage: function (webUrl) {
        window.open(webUrl, '_blank');
      },
      getChartList: function () {
        this.axios.get(`/chart/webChart/charts`)
          .then((resp) => {
            if (resp.data.flag) {
              this.chartList = resp.data.data
            }
          })
      }
    },
    mounted() {
      this.getChartList();
    }
  }
</script>

<style scoped>
  .chart {
    width: 1200px;
    height: 400px;
    margin: 0px auto;
    cursor: pointer;
  }

  /*跑马灯图片样式*/
  .carousel-img {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }
</style>
